iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
Python

自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作系列 第 21

Day21 藉由教學影片學習HTML與CSS基礎

  • 分享至 

  • xImage
  •  

今天要分享的是HTML中的b/strong/i/em元素iframe元素音樂播放div/span元素button 按鈕以及Header與Footer
一、b/strong/i/em元素
b-粗體元素/strong-強調元素/i-斜體元素/em元素
外觀上斜體元素跟em元素看起來相同,但em元素可以為文字添加語意
如想讓文字添加效果,使用b和i即可;如想讓html更有語意化,使用strong和em即可
https://ithelp.ithome.com.tw/upload/images/20241001/20167787CrVUs5MEAw.png
二、iframe元素
iframe元素-可在自己的網頁嵌入其他的網頁內容,其他網頁如果內容更新,自己的網頁也會連帶更新
這裡使用index.html去嵌入first.html跟second.html
影片連結是從"分享"的"嵌入"複製的
https://ithelp.ithome.com.tw/upload/images/20241001/20167787witH67MVy1.png
https://ithelp.ithome.com.tw/upload/images/20241001/20167787vIfimbLA8o.png
https://ithelp.ithome.com.tw/upload/images/20241001/20167787POcVtYlwPV.png
三、在網頁中播放音樂
#加入controls會有播放器的功能
查詢"pixabay mp3"即可下載音檔,下載後拖進資料夾"0928_02"中
https://ithelp.ithome.com.tw/upload/images/20241001/20167787GKITOMKJz1.png
https://ithelp.ithome.com.tw/upload/images/20241001/20167787kE8jLlef82.png
四、div/span元素
#div和span是常用的html方法,如搭配CSS使用的話就會讓網頁呈現不同樣貌
https://ithelp.ithome.com.tw/upload/images/20241001/201677872gmpgAk5Tg.png
五、button 按鈕
#border-radius用來設定按鈕的圓角
https://ithelp.ithome.com.tw/upload/images/20241001/20167787MSsr9AH8oQ.png
六、Header與Footer
#Header:頁首 / Footer:頁尾
header跟head的差別:
header:顯示一些放在網頁最上端的資訊
head:在body上方,描述此網頁資訊的地方

https://ithelp.ithome.com.tw/upload/images/20241002/20167787pARsk1yGLe.png


以上是我今天的分享,下篇開始會到CSS教學的部分,謝謝大家的觀看!
參考網址:https://www.youtube.com/watch?v=fa214Ct6t9w&list=LL&index=3


上一篇
Day20 藉由影片教學學習HTML與CSS基礎
下一篇
Day22 藉由教學影片學習HTML與CSS基礎
系列文
自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言